<template>
  <el-pagination
    small
    background
    layout="prev, pager, next,total,sizes,jumper"
    :total="props.total"
    v-model:page-size="pageSize"
    v-model:current-page="currentPage"
    :page-sizes="[2, 5, 10]"
    @current-change="change"
    @size-change="change"
  />
</template>
<script setup>
import { ref, defineExpose, defineProps } from 'vue';

const emits = defineEmits(['change']);

const props = defineProps({
  total: {
    type: Number,
  },
});

const currentPage = ref(1);
const pageSize = ref(10);

function change() {
  emits('change', { page: currentPage.value, perPage: pageSize.value });
}

defineExpose({ currentPage });
</script>
